<template>
    <view class="login-container">
        <view class="login-header">
            <image class="login-logo" mode="heightFix" src="/static/images/logo_dark.png"> </image>

            <view class="login-wrapper">
                <u--form labelPosition="left" :model="loginForm" :rules="rules" ref="loginForm" errorType="toast">
                    <u-form-item>
                        <text class="app-title">{{ globalVar.app.name }}</text>
                    </u-form-item>
                    <u-form-item prop="username">
                        <u--input class="form-item-input" v-model="loginForm.username" shape="circle"
                            placeholder="请输入您的账号" :clearable="true">
                            <view slot="prefix">
                                <u-icon name="account" size="24"></u-icon>
                            </view>
                        </u--input>
                    </u-form-item>
                    <u-form-item prop="password">
                        <u--input class="form-item-input" v-model="loginForm.password" shape="circle"
                            placeholder="请输入您的密码" :clearable="true" :password="true">
                            <view slot="prefix">
                                <u-icon name="lock" size="24"></u-icon>
                            </view>
                        </u--input>
                    </u-form-item>
                    <u-form-item prop="code">
                        <u--input class="form-item-input" v-model="loginForm.code" shape="circle" placeholder="请输入验证码"
                            :clearable="true">
                            <view slot="prefix">
                                <u-icon name="checkmark-circle" size="24"></u-icon>
                            </view>
                        </u--input>
                        <view style="margin-left: 10px;width: 96px;height:36px">
                            <image class="captcha-img" v-if="captchaUrl" :src="captchaUrl" @click="getCodeImg" />
                            <text class="no-code-text" v-else>
                                无验证码
                            </text>
                        </view>
                    </u-form-item>
                    <u-form-item prop="code">
                        <u-checkbox-group v-model="rememberMe" placement="row" shape="circle">
                            <u-checkbox name="1" label="记住密码"></u-checkbox>
                        </u-checkbox-group>
                    </u-form-item>
                    <u-form-item>
                        <u-button class="login-btn" text="点我登录" shape="circle" :disabled="disabled"
                            color="linear-gradient(135deg, #B17FF8, #67A6FD)" @click="submitForm"></u-button>
                    </u-form-item>
                </u--form>

            </view>
        </view>
    </view>
</template>

<script>
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { getCodeImg, login, getUserInfo } from "@/utils/api";
import { getToken } from "@/utils";

export default {
    data() {
        return {
            loginForm: {
                username: "",
                password: "",
                code: "",
                uuid: "",
            },
            captchaUrl: "",
            rememberMe: [],
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入您的账号",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入您的密码",
                        trigger: "blur",
                    },
                ],
                code: [
                    {
                        required: true,
                        message: "请输入验证码",
                        trigger: "blur",
                    },
                ],
            },
            disabled: false,
        };
    },
    onShow() {},
    onLoad() {
        this.isLogin(); // 判断是否已登录
        this.init();
        this.getCodeImg();
    },

    methods: {
        async getCodeImg() {
            let res = await getCodeImg({ custom: { isToken: "0" } });
            this.captchaUrl = "data:image/gif;base64," + res.img; // 获取验证码图片的 URL
            this.loginForm.uuid = res.uuid; // 验证码 UUID
        },

        init() {
            let rememberMe = uni.getStorageSync("rememberMe");
            if (rememberMe == "true") {
                let loginInfo = uni.getStorageSync("loginInfo");
                if (loginInfo) {
                    loginInfo = JSON.parse(loginInfo);
                    this.loginForm.username = loginInfo.username;
                    this.loginForm.password = decrypt(loginInfo.password);
                    this.rememberMe = ["1"];
                }
            }
        },

        isLogin() {
            if (getToken()) {
                uni.reLaunch({ url: "/pages/index/index" });
            }
        },
        async submitForm() {
            this.$refs.loginForm.validate().then(async (res) => {
                try {
                    this.disabled = true;
                    let r = await login(this.loginForm, {
                        custom: { catch: true, isToken: "0" },
                    });
                    this.$u.toast("登录成功,跳转中");
                    uni.setStorageSync("token", r.token);
                    if (this.rememberMe.length > 0) {
                        uni.setStorageSync("rememberMe", "true");
                        let loginInfo = {
                            username: this.loginForm.username,
                            password: encrypt(this.loginForm.password),
                        };
                        uni.setStorageSync(
                            "loginInfo",
                            JSON.stringify(loginInfo)
                        );
                    } else {
                        uni.removeStorageSync("rememberMe");
                        uni.removeStorageSync("loginInfo");
                    }
                    this.disabled = false;
                    let userRes = await getUserInfo({
                        custom: { catch: true },
                    });
                    this.$store.commit("user/SET_USER_INFO", userRes.user);
                    setTimeout(() => {
                        uni.reLaunch({
                            url: "/pages/index/index",
                        });
                    }, 1000);
                } catch (error) {
                    this.disabled = false;
                    this.getCodeImg();
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
uni-page-body {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
}

.login-container {
    width: 100%;
    height: 100%;
}

.login-logo {
    height: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.login-header {
    width: 100%;
    height: 600rpx;
    background: linear-gradient(135deg, #b17ff8, #67a6fd);
    position: relative;
}

.login-wrapper {
    width: 90%;
    background: #fff;
    border-radius: 8px;
    margin: 0 auto;
    padding: 20px 30px 30px;
    position: absolute;
    left: 5%;
    top: 520rpx;
    box-sizing: border-box;
}

.form-item-input {
    // padding: 12px !important;
}

.app-title {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(135deg, #b17ff8, #67a6fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 10px;
}

.login-btn {
    width: 500rpx;
    // height: 48px;
    margin-top: 10px;
}

.captcha-img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

.no-code-text {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    text-align: center;
    line-height: 36px;
    border-radius: 2px;
    font-size: 12px;
    color: #666;
}
</style>
